<template>
  <div class="myDiv bg">
    <div class="info-hearder">
      <div class="base-info">
        <span>姓名：{{name}}</span>
        <span>身份证号：{{idCard}}</span>
      </div>
      <div class="remark">说明：根据模块依次填写表单</div>
    </div>
    <div class="info-content">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>类别模块</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">收起</el-button> -->
        </div>
        <div class="content">
          <el-form :model="typeForm" ref="typeForm" :rules="typeRules" :inline="true" class="formWidth lastForm" label-width="90px">
            <el-form-item label="请选择：" prop="disablesType">
              <el-radio-group v-model="typeForm.disablesType" @change="changeType">
                <el-radio v-for="(item,index) in disablesTypeList" :key="index" :label="item.id" >{{item.formName}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="typeForm.disablesType == 15" label="请选择：" prop="exclusiveA"> 
              <el-radio-group v-model="typeForm.exclusiveA" @change="changeExclusiveA">
                <el-radio v-for="(item,index) in exclusiveList" :key="index + 'A'" :label="item.id" >{{item.formName}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="typeForm.disablesType == 17" label="请选择：" prop="exclusiveB"> 
              <el-radio-group v-model="typeForm.exclusiveB" @change="changeExclusiveA">
                <el-radio v-for="(item,index) in exclusiveList" :key="index + 'B'" :label="item.id" >{{item.formName}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="typeForm.disablesType != null" label="请选择：" prop="relative">
              <el-checkbox-group v-model="typeForm.relative" @change="changeRelative">
                <el-checkbox v-for="(item,index) in relativeList" :key="index" :label="item.id">{{item.formName}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <!-- 残疾军人信息表单 -->
      <disabled-card ref="disabledForm" :soldierId="$route.params.id" v-if="typeForm.disablesType == 15"></disabled-card>
      <!-- 伤残民兵民工信息表单 -->
      <militiaman-card ref="militiamanForm" :soldierId="$route.params.id" v-if="typeForm.disablesType == 16"></militiaman-card>
      <!-- 军队转业干部 -->
      <cadres-card ref="cadresForm" :soldierId="$route.params.id" v-if="typeForm.exclusiveA == 5 || typeForm.exclusiveB == 5 "></cadres-card>
      <!-- 退役士兵 -->
      <retired-card ref="retiredForm" :soldierId="$route.params.id" v-if="typeForm.exclusiveA == 6 || typeForm.exclusiveB == 6 "></retired-card>
      <!-- 军队离休退休干部和退休士官 -->
      <retiredCadreCard ref="retiredCadreForm" :soldierId="$route.params.id" v-if="typeForm.exclusiveA == 7 || typeForm.exclusiveB == 7 "></retiredCadreCard>
      <!-- 军队无军籍离退休退职职工 -->
      <nomilitary-card ref="nomilitaryForm" :soldierId="$route.params.id" v-if="typeForm.exclusiveA == 8 || typeForm.exclusiveB == 8 "></nomilitary-card>
      <!-- 退伍红军老战士 -->
      <retiredRedArmyCard ref="retiredRedArmyForm" :soldierId="$route.params.id" v-if="typeForm.exclusiveA == 9 || typeForm.exclusiveB == 9 "></retiredRedArmyCard>
      <!-- 复员军人 -->
      <demobilization-card ref="demobilizationForm" :soldierId="$route.params.id" v-if="typeForm.exclusiveA == 10 || typeForm.exclusiveB == 10 "></demobilization-card>
      <!-- 烈士遗属 -->
      <martyr-card ref="martyrForm" :soldierId="$route.params.id" v-if="typeForm.relative.indexOf(11) != -1"></martyr-card>
      <!-- 因公牺牲军人遗属 -->
      <duty-card ref="dutyForm" :soldierId="$route.params.id" v-if="typeForm.relative.indexOf(12) != -1"></duty-card>
      <!-- 病故军人遗属 -->
      <illness-card ref="illnessForm" :soldierId="$route.params.id" v-if="typeForm.relative.indexOf(13) != -1"></illness-card>
      <!-- 现役军人家属 -->
      <active-card ref="activeForm" :soldierId="$route.params.id" v-if="typeForm.relative.indexOf(14) != -1"></active-card>

      <el-card v-if="isShow" class="box-card secordCard" shadow="never">  
        <div slot="header" class="clearfix">
          <span>生活状况模块</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">收起</el-button> -->
        </div>
        <div>
          <el-form :model="lifeForm" ref="lifeForm" :rules="lifeRules" :inline="true" class="formWidth" label-width="170px">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item  label="现工作单位" prop="company">
                  <el-input
                    v-model="lifeForm.company"
                    placeholder="请输入"
                    clearable
                    size="small"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="现单位性质" prop="unitNature">
                  <el-select v-model="lifeForm.unitNature" placeholder="请选择">
                    <el-option
                      v-for="dict in unitNatureOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="parseInt(dict.dictValue)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="个人年收入" prop="annualRevenue">
                  <el-select v-model="lifeForm.annualRevenue" placeholder="请选择">
                    <el-option
                      v-for="dict in annualRevenueOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="parseInt(dict.dictValue)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="医疗保险" prop="medicalInsurance">
                  <el-select v-model="lifeForm.medicalInsurance" placeholder="请选择">
                    <el-option
                      v-for="dict in medicalInsuranceOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="parseInt(dict.dictValue)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="养老保险" prop="endowmentInsurance">
                  <el-select v-model="lifeForm.endowmentInsurance" placeholder="请选择">
                    <el-option
                      v-for="dict in endowmentInsuranceOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="parseInt(dict.dictValue)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="住房公积金" prop="accumulationFund">
                  <el-select v-model="lifeForm.accumulationFund" placeholder="请选择">
                    <el-option label="有" value="1"></el-option>
                    <el-option label="无" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="住房状况" prop="houseProperty">
                  <el-select v-model="lifeForm.houseProperty" placeholder="请选择" @change="changeHouse">
                    <el-option
                      v-for="dict in housePropertyOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="parseInt(dict.dictValue)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item  label="房屋面积" prop="area">
                  <el-input
                    :disabled="isHouse"
                    v-model="lifeForm.area"
                    placeholder="请输入"
                    clearable
                    size="small"
                  >
                  <i slot="suffix" style="font-style:normal;margin-right: 10px;">m2</i>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="社会救助状况" prop="socialAssistance">
                  <el-select v-model="lifeForm.socialAssistance" placeholder="请选择">
                    <el-option
                      v-for="dict in socialAssistanceOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="parseInt(dict.dictValue)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="享受国家抚恤补助金情况" prop="isHelp">
                  <el-select v-model="lifeForm.isHelp" placeholder="请选择">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="享受残疾人两项补贴情况" prop="isHelp2">
                  <el-select v-model="lifeForm.isHelp2" placeholder="请选择">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            
          </el-form>
        </div>
      </el-card>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>主要诉求模块</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">收起</el-button> -->
        </div>
        <div>
          <el-form :model="appealForm" ref="appealForm" :rules="appealRules" :inline="true" class="formWidth lastForm" label-width="90px">
            <el-form-item label="主要困难：" prop="mainDifficulties">
              <el-radio-group v-model="appealForm.mainDifficulties">
                <el-radio v-for="dict in mainDifficultiesOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)" >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="主要诉求：" prop="mainAppeal">
              <el-radio-group v-model="appealForm.mainAppeal">
                <el-radio v-for="dict in mainAppealOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)" >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="具体诉求：" prop="detailAppeal">
              <el-input style="width: 600px" v-model="appealForm.detailAppeal" placeholder="请输入具体诉求" type="textarea" :autosize="{minRows:4 }" />
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div class="info-footer">
      <el-button type="primary" @click="submitForm" :loading="submitLoading">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getFormList ,submitOtherInfo } from "@/api/archive_info/base";
import disabledCard from "./disabledCard.vue"
import militiamanCard from './militiamanCard.vue'
import cadresCard from './cadresCard.vue'
import retiredCard from './retiredCard.vue'
import retiredCadreCard from './retiredCadreCard.vue'
import nomilitaryCard from './nomilitaryCard.vue'
import retiredRedArmyCard from './retiredRedArmyCard.vue'
import demobilizationCard from './demobilizationCard.vue'
import DemobilizationCard from './demobilizationCard.vue'
import martyrCard from './martyrCard.vue'
import dutyCard from './dutyCard.vue'
import illnessCard from './illnessCard.vue'
import activeCard from './activeCard.vue'

export default {
  name: "otherInfo",
  components: { disabledCard , militiamanCard , cadresCard , retiredCard , retiredCadreCard , nomilitaryCard , retiredRedArmyCard , 
  demobilizationCard , DemobilizationCard , martyrCard , dutyCard , illnessCard , activeCard},
  data(){
    return {
      idCard: '',
      // 类别模块
      typeForm: {
        disablesType: null, 
        exclusiveA: null,
        exclusiveB: null,
        relative: []
      },
      firstForm: '', // 第一个选择的form名称
      secondForm: '', 
      thirdForm: [],
      typeRules:{
        disablesType:[{required:true , message:'不可为空' , trigger: 'blur'}],
        exclusiveA:[{required:true , message:'不可为空' , trigger: 'blur'}]
      },
      // 生活模块
      lifeForm:{
        // soldierId: ''
      },
      lifeRules:{

      },
      // 主要诉求模块
      appealForm:{
        // soldierId: ''
      },
      appealRules:{

      },
      disablesTypeList: [], // 身体类型
      exclusiveList: [], // 退役从事类型
      relativeList: [], // 抚恤对象
      unitNatureOptions: [], // 现有单位性质
      annualRevenueOptions: [], // 个人年收入
      medicalInsuranceOptions: [], // 医疗保险
      endowmentInsuranceOptions: [], //养老保险
      housePropertyOptions: [], //住房状况
      socialAssistanceOptions: [], //社会救助
      mainDifficultiesOptions: [], // 主要困难
      mainAppealOptions: [], // 主要诉求
      isHouse: true, // 房屋面积的禁用
      submitLoading: false, // 提交的loading
    }
  },
  computed: {
    isShow(){
      console.log('this.typeForm.exclusiveA',this.typeForm.exclusiveA,this.typeForm.exclusiveB)
      if(!this.typeForm.exclusiveA && !this.typeForm.exclusiveB){
        return false
      }else if(this.typeForm.exclusiveA == 7 || this.typeForm.exclusiveA == 8 || this.typeForm.exclusiveB == 7 || this.typeForm.exclusiveB == 8){
        return false
      }else{
        return true
      }
    }
  },
   created() {
    this.name = this.$route.params.name;
    this.idCard = this.$route.params.idCard;
    this.getDicts("unit_nature").then(response => {
      this.unitNatureOptions = response.data;
    });
    this.getDicts("annual_revenue").then(response => {
      this.annualRevenueOptions = response.data;
    });
    this.getDicts("medical_insurance").then(response => {
      this.medicalInsuranceOptions = response.data;
    });
    this.getDicts("endowment_insurance").then(response => {
      this.endowmentInsuranceOptions = response.data;
    });
    this.getDicts("house_property").then(response => {
      this.housePropertyOptions = response.data;
    });
    this.getDicts("social_assistance").then(response => {
      this.socialAssistanceOptions = response.data;
    });	
    this.getDicts("main_difficulties").then(response => {
      this.mainDifficultiesOptions = response.data;
    });	
    this.getDicts("main_appeal").then(response => {
      this.mainAppealOptions = response.data;
    });
  },
  mounted(){
    // this.lifeForm.soldierId = this.$route.params.id;
    // this.appealForm.soldierId = this.$route.params.id;
    this.initData();
  },
  methods:{
    initData(){
      getFormList().then(res => {
        if(res.data){
          this.disablesTypeList = res.data.disablesTypeList;
          this.exclusiveList = res.data.exclusiveList;
          this.relativeList = res.data.relativeList;
        }else{
          this.disablesTypeList = [];
          this.exclusiveList = [];
          this.relativeList = [];
        }
      })
    },
    // 列表模块第一个选择的改变
    changeType(val){
      this.typeForm.relative = [];
      this.thirdForm = []
      this.typeForm.exclusiveA = null;
      this.typeForm.exclusiveB = null;
      this.secondForm = '';
      this.firstForm = (val==15 ? 'disabledForm' : (val==16 ? 'militiamanForm' : ''));
      this.$refs.typeForm.clearValidate();
    },
    // 列表模块第二个选择的改变
    changeExclusiveA(val){
      console.log('val',val)
      switch(val)
        {
          case 5:
              this.secondForm = 'cadresForm'
              break;
          case 6:
              this.secondForm = 'retiredForm'
              break;
          case 7:
              this.secondForm = 'retiredCadreForm'
              break;
          case 8:
              this.secondForm = 'nomilitaryForm'
              break;
          case 9:
              this.secondForm = 'retiredRedArmyForm'
              break;
          case 10:
              this.secondForm = 'demobilizationForm'
              break;
          default:
              this.secondForm = ''
        }
    },
    // 列表模块第三个选择的改变
    changeRelative(val){
      console.log('val',val)
      this.thirdForm = []
      if(val.indexOf(11) != -1){
        this.thirdForm.push('martyrForm')
      }
      if(val.indexOf(12) != -1){
        this.thirdForm.push('dutyForm')
      }
      if(val.indexOf(13) != -1){
        this.thirdForm.push('illnessForm')
      }
       if(val.indexOf(14) != -1){
        this.thirdForm.push('activeForm')
      }
    },

    // 住房情况改变
    changeHouse(val){
      if(val == 0){
        this.isHouse = true;
      }else{
        this.isHouse = false;
      }
    },
    // 提交所有的表单数据
    submitForm(){
      this.submitLoading = true;
      let list = [];
      list.push(this.validateForm("typeForm"))
      console.log('1121',this.firstForm,this.secondForm,this.thirdForm)
      if(this.firstForm){
        list.push(this.checkForm(this.firstForm))
      }
      if(this.secondForm){
        list.push(this.checkForm(this.secondForm))
      }
      if(this.thirdForm.length>0){
        this.thirdForm.forEach(item => {
          list.push(
          this.checkForm(item)
          )
        })
      }
      if(this.isShow){
        list.push(this.validateForm("lifeForm"))
      }
      list.push(this.validateForm("appealForm"))
      console.log('list',list)
      Promise.all(list)
        .then(() => {
          console.log("通过检测");
          let soldierFormInfoTo = this.getSoldierFormInfoTo();
          let disabledSoldier = this.firstForm == 'disabledForm' ? this.$refs.disabledForm.form : null;
          let disabledMilitiaman = this.firstForm == 'militiamanForm' ? this.$refs.militiamanForm.form : null;
          let transferredCadres = this.secondForm == 'cadresForm' ? this.$refs.cadresForm.form : null ;
          let retiredSoldier = this.secondForm == 'retiredForm' ? this.$refs.retiredForm.form : null ;
          let retiredCadre = this.secondForm == 'retiredCadreForm' ? this.$refs.retiredCadreForm.form : null ;
          let retiredNoMilitary = this.secondForm == 'nomilitaryForm' ? this.$refs.nomilitaryForm.form : null ;
          let retiredRedArmy = this.secondForm == 'retiredRedArmyForm' ? this.$refs.retiredRedArmyForm.form : null ;
          let demobilizationSoldier = this.secondForm == 'demobilizationForm' ? this.$refs.demobilizationForm.form : null ;
          let familyOfMartyr = this.thirdForm.indexOf('martyrForm') != -1 ? this.$refs.martyrForm.form : null ;
          let familyOfDutySoldier = this.thirdForm.indexOf('dutyForm') != -1 ? this.$refs.dutyForm.form : null ;
          let familyOfIllnessSoldier = this.thirdForm.indexOf('illnessForm') != -1 ? this.$refs.illnessForm.form : null ;
          let familyOfActiveSoldier = this.thirdForm.indexOf('activeForm') != -1 ? this.$refs.activeForm.form : null ;
          let livingConditionInfo = this.isShow ? (Object.keys(this.lifeForm).length == 0 ? null : this.lifeForm) : null;
          let mainAppeal = Object.keys(this.appealForm).length == 0 ? null : this.appealForm;
          let params = {
            soldierFormInfoTo: soldierFormInfoTo,
            disabledSoldier: disabledSoldier,
            disabledMilitiaman: disabledMilitiaman,
            transferredCadres: transferredCadres,
            retiredSoldier:  retiredSoldier,
            retiredCadre: retiredCadre,
            retiredNoMilitary: retiredNoMilitary,
            retiredRedArmy: retiredRedArmy,
            demobilizationSoldier: demobilizationSoldier,
            familyOfMartyr: familyOfMartyr,
            familyOfDutySoldier: familyOfDutySoldier,
            familyOfIllnessSoldier: familyOfIllnessSoldier,
            familyOfActiveSoldier: familyOfActiveSoldier,
            livingConditionInfo: livingConditionInfo,
            mainAppeal: mainAppeal,
          }
          submitOtherInfo(params).then(res => {
            this.msgSuccess("保存成功");
            this.submitLoading = false;
          }).catch(error => {
            this.submitLoading = false;
          })
        })
        .catch(() => {
          console.log("未通过");
        });
    },
    // 获取参数信息
    getSoldierFormInfoTo(){
      let exclusive = null;
      if(this.typeForm.exclusiveA){
        exclusive = this.typeForm.exclusiveA;
      }else if(this.typeForm.exclusiveB){
          exclusive = this.typeForm.exclusiveB;
      }else{
        exclusive = null;
      }
      let arr = [];
      arr.push(this.typeForm.disablesType);
      if(exclusive){
        arr.push(exclusive)
      }
      if(this.typeForm.relative.length > 0){
        arr = arr.concat(this.typeForm.relative)
      }
      let soldierFormInfoTo = {
        soldierId: this.$route.params.id,
        formIds: arr.join(','),
      }
      return soldierFormInfoTo
    },

    // 所有表单验证方法
    checkForm(formName) {
      return this.$refs[formName].validateForm();
    },

    // 当前页面表单的验证
    validateForm(formName){
      return new Promise((resolve , reject) => {
        this.$refs[formName].validate(valid => {
          console.log('valid',valid)
          if (valid) {
           resolve()
          } else {
            reject()
          }
        });
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.bg{
  min-height: calc(100vh - 84px);
}
.myDiv{
  position: relative;
  background: #f0f2f5;

  .info-hearder{
    padding: 16px 24px;
    background-color: #fff;

    .base-info{
      margin-bottom: 10px;
      font-size: 18px;
      color: #000;
      font-weight: bold;
      line-height: 32px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      span:last-child{
        margin-left: 50px;
      }
    }
    .remark{
      font-size: 14px;
      color: #000;
      letter-spacing: 1px;
      line-height: 30px;
    }
  }
  .info-content{
    margin: 16px;
    overflow: hidden;

    .box-card{
      margin-bottom: 16px;
    }
    .box-card:last-child{
      margin-bottom: 56px;
    }
  }
  .info-footer{
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
    padding: 0 24px;
    line-height: 44px;
    background-color: #fff;
    border-top: 1px solid #d9d9d9;
    box-shadow: 0 -6px 16px -8px #00000014, 0 -9px 28px #0000000d, 0 -12px 48px 16px #00000008;
    transition: width .2s;
  }
}
::v-deep .secordCard .el-form-item__content {
   height: 36px;
}
::v-deep .lastForm .el-form-item{
  display: block;
}
</style>